<template>
  <div>
    <!-- 交易记录 -->
    <el-table
      :data="state.tableData"
      class="customer-table"
      max-height="250"
      header-cell-class-name="eltablebg"
      style="width: 100%"
    >
      <el-table-column prop="date" :label="$t('exchange.type')">
        <template #default="r">
          <span :class="r.row.type === 2 ? 'text-red' : 'text-green'">{{
            r.row.type === 1 ? $t("lever.buyup") : $t("lever.buyfall")
          }}</span>
          <!-- {{ r.row.type_name }} -->
          {{ r.row.symbol_name }}
        </template>
      </el-table-column>
      <el-table-column prop="open_price" :label="$t('lever.buyingprice')">
        <template #default="r">
          {{ $currency(r.row.open_price) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="open_time"
        :label="$t('lever.opentime')"
      >
        <template #default="r">
          <span>{{r.row.created_at}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="end_price" :label="$t('lever.setprice')">
        <template #default="r">
          {{ $currency(r.row.end_price) }}
        </template>
      </el-table-column>
      <el-table-column prop="deal_price" :label="$t('stock.orderAmount')">
        <template #default="r">
          {{ $currency(r.row.number) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        :label="$t('exchange.profitAndLoss')"
      >
        <template #default="r">
          <span
            :class="
              countWinlose(
                r.row.close_price,
                r.row.order_type,
                r.row.open_price,
                r.row.deal_price,
                r.row.profit_ratio
              ).indexOf('-') > -1 && r.row.order_status !== 5
                ? 'text-red'
                : 'text-green'
            "
          >
            <span
              v-if="
                countWinlose(
                  r.row.close_price,
                  r.row.order_type,
                  r.row.open_price,
                  r.row.deal_price,
                  r.row.profit_ratio
                ).indexOf('-') === -1 && r.row.order_status !== 5
              "
              >+</span
            >
            {{
              r.row.order_status !== 5
                ? $currency(
                    formatDecimal(
                      Number(
                        countWinlose(
                          r.row.close_price,
                          r.row.order_type,
                          r.row.open_price,
                          r.row.deal_price,
                          r.row.profit_ratio
                        )
                      ),
                      priceAccuracy
                    )
                  )
                : "--"
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" :label="$t('lever.duration')">
        <template #default="r">
          <span>
            {{ r.row.order_show_time
            }}{{
              r.row.seconds
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="open_time"
        :label="$t('assets.handlingFee')"
      >
        <template #default="r">
          <span>{{
            r.row.fee
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" prop="" :label="$t('assets.status')">
        <template #default="r">
          <span>{{
            r.row.status_name
          }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <div>
          <Norecord :useDark="true" />
          <!-- <div class="quotet3 text-12 mb-60 l-10">暂无数据</div> -->
        </div>
      </template>
    </el-table>

    <!-- 监听table滚动条触底 -->
    <Tablescroll @scroll="tableScroll" />
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { secondLeverPage } from "@/api/currency";
import { demosecondLeverPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { onMounted, reactive, watch } from "vue";
import { countWinlose, formatDecimal } from "@/utils/common";
import Tablescroll from "@/components/tablescroll/index.vue";
import { LoginInterception, decimalDigitsInputFilter } from "@/utils/common";
import { rideFix } from "@/utils/precisionMath";
import { getTimeZoneDate } from "@/utils/times.js";
import { reduceFix } from "@/utils/precisionMath";
import {
  microtradeLists
} from "@/api/assets";

export default {
  name: "Record",
  components: { Norecord, Tablescroll },
  props: { checked: Boolean, tradingid: Number, priceAccuracy: Number },
  setup(props) {
    const state = reactive({
      listParam: {
        page: 1,
        limit: 10,
        order_status: 3,
      },
      total: 0,
      loading: false,
      tableData: [],
      checked: props.checked,
    });
    /**
     * methods
     */
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    // eslint-disable-next-line no-unused-vars
    watch(props, (val) => {
      state.listParam.page = 1;
      getList();
    });
    const refresh = () => {
      state.listParam.page = 1;
      getList();
    };
    onMounted(() => {
      getList();
    });
    // table滚动条触底
    const tableScroll = () => {
      console.log("daodi", state.total, state.tableData.length);
      if (state.total > state.tableData.length) {
        state.listParam.page = state.listParam.page + 1;
        getList();
      }
    };
    const getList = () => {
      const param = { ...state.listParam };
      // 判断是否只显示当前币
      if (props.checked) {
        param.currency_match_id = props.tradingid;
      }
      state.loading = true;
      param.match_id=3
      param.status=3
      let setFun = microtradeLists;
          setFun(param).then((res) => {
            console.log(res.data,'res----')
            state.loading = false;
            state.tableData = res.data.data;
            console.log(state.tableData,'res----')
            // if (state.listParam.page === 1) {
            //   state.tableData = res.data;
            // } else {
            //   state.tableData = state.tableData.concat(res.data);
            // }
            state.total = res.data.total;
          });
      // LoginInterception("/secondlever")
      //   .then(() => {
         
      //   })
      //   .catch(() => {
      //     state.loading = false;
      //   });
    };
    // 计算下单金额
    const CountDealPrice = (val) => {
      let price = 0;
      if (val.deal_price) {
        price = reduceFix(val.deal_price, val.handling_fee);
      }
      return price;
    };
    return {
      state,
      getList,
      countWinlose,
      tableScroll,
      getTimeZoneDate,
      refresh,
      decimalDigitsInputFilter,
      formatDecimal,
      rideFix,
      CountDealPrice,
    };
  },
};
</script>

<style scoped lang="less"></style>
